<!-- 
    @file: 后台首页
    @auth: lizibin
 -->
<template>
    <div class="backstage_home">
        <div class="top_bg">
            <h1>脚踏实地，笃志前行</h1>
            <p>博客后台管理系统·欢迎您，{{ userInfo.userName }}</p>
        </div>

        <p style="margin-bottom:15px;color: rgb(253 253 253);">
        <div style="width: 12px;height:12px;background-color:#f9a332;border-radius: 50%;float: left;margin-top: 5px;
                                                            margin-right: 8px;"></div>Data statistics of this site
        </p>
        <el-row :gutter="40" class="data_row">
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
                <div class="four-block">
                    <div class="data_left">
                        <el-icon>
                            <Avatar />
                        </el-icon>
                    </div>
                    <div class="data_right">
                        <h1>{{ userCount }}<span>人</span></h1>
                        <p>注册用户</p>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
                <div class="four-block">
                    <div class="data_left">
                        <el-icon>
                            <Reading />
                        </el-icon>
                    </div>
                    <div class="data_right">
                        <h1>{{ articleCount }}<span>篇</span></h1>
                        <p>本站文章</p>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
                <div class="four-block">
                    <div class="data_left">
                        <el-icon>
                            <ChatDotSquare />
                        </el-icon>
                    </div>
                    <div class="data_right">
                        <h1>{{ commentCount }}<span>条</span></h1>
                        <p>本站评论</p>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
                <div class="four-block">
                    <div class="data_left">
                        <el-icon>
                            <Clock />
                        </el-icon>
                    </div>
                    <div class="data_right">
                        <h1>{{ siteDays }}<span>天</span></h1>
                        <p>本站上线天数</p>
                    </div>
                </div>
            </el-col>
        </el-row>

        <p style="margin-bottom:15px;color: rgb(253 253 253);">
        <div style="width: 12px;height:12px;background-color:#f9a332;border-radius: 50%;float: left;margin-top: 5px;
                                                            margin-right: 8px;"></div>Data display of articles in this site
        </p>
        <el-row :gutter="35">
            <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
                <div class="echarts" ref="MyEchart" id="chart">

                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14">
                <div class="latest_article">
                    <h3 style="color: #fff;">
                        最新文章
                        <a href="/addArticle">
                            <el-button
                                style="color:white;background: linear-gradient(to right, #6D80FE, #23D2FD);float: right;">
                                新建文章
                            </el-button>
                        </a>

                    </h3>
                    <el-divider border-style="dashed" />
                    <p class="article_list" v-for="item in articleInfo">
                        <span>{{ item.publishTime }}</span>
                        <span>{{ item.userName }}</span>
                        <span>发布了</span>
                        <span>
                            <a :href="'http://82.157.47.194/articleDetails/' + item.articleId">{{ item.articleTitle }}</a>
                        </span>
                    </p>
                    <a href="/article" class="more">
                        查看更多
                        <el-icon>
                            <DArrowRight />
                        </el-icon>
                    </a>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script lang="ts" setup>
// import {
//     Iphone,
//     Location,
//     OfficeBuilding,
//     Tickets,
//     User,
// } from '@element-plus/icons-vue'
import { stat } from 'fs';
import { ArticleInfo } from '@/types/articleTypes'
import { GetUserCount, GetArticleCount, GetCommentCount } from '@/api/backstage/index'
import { GetArticleClass, GetAllArticleInfo } from '@/api/foreground/index'
import {
    ref,
    reactive,
    toRefs,
    onMounted,
    getCurrentInstance,
} from 'vue'
import * as echarts from "echarts";
import { useStore } from '@/store/index'
import { storeToRefs } from 'pinia'
const Store = useStore()
const { LoginInfo } = storeToRefs(Store)
const { code: LoginCode, data: LoginData } = LoginInfo.value;
const MyEchart = ref()
// const {
//     proxy
// } = getCurrentInstance()
const state = reactive({
    // 当前登录的用户信息
    userInfo: {
        userEmail: '',
        userIcon: '',
        userPass: '',
        userRegdate: '',
        userSignature: '',
        userId: -1,
        userType: -1,
        userName: '',
    },
    // 注册用户总数
    userCount: -1,
    // 通过审核的文章总数量
    articleCount: -1,
    // 评论总数
    commentCount: -1,
    // 本站上线天数
    siteDays: 0,
    // 饼图
    // myChart: "",
    // 文章信息
    articleInfo: [<ArticleInfo>{}]
})

const { userInfo, userCount, articleCount, commentCount, siteDays, articleInfo } = toRefs(state)

onMounted(() => {
    // 获取登录的用户信息
    state.userInfo = LoginData.data[0];
    // 查询注册用户总数
    GetUserCount().then(res => {
        var value = res.data < 10 ? 0 + res.data : res.data;
        if (value > 0) {
            var num = 0;
            var t = setInterval(function () {
                num++;
                state.userCount = num < 10 ? 0 + num : num;
                if (num == value) {
                    clearInterval(t);
                }
            }, 30);
        } else {
            state.userCount = value;
        }
    })

    // 查询通过审核的文章总数量
    GetArticleCount().then(res => {
        var value = res.data < 10 ? 0 + res.data : res.data;
        if (value > 0) {
            var num = 0;
            var t = setInterval(function () {
                num++;
                state.articleCount = num < 10 ? 0 + num : num;
                if (num == value) {
                    clearInterval(t);
                }
            }, 10);
        } else {
            state.articleCount = value;
        }
    })

    // 查询评论总数
    GetCommentCount().then(res => {
        var value = res.data < 10 ? 0 + res.data : res.data;
        if (value > 0) {
            var num = 0;
            var t = setInterval(function () {
                num++;
                state.commentCount = num < 10 ? 0 + num : num;
                if (num == value) {
                    clearInterval(t);
                }
            }, 10);
        } else {
            state.commentCount = value;
        }
    })

    // 本站上线天数
    calculateDays()

    // 饼图 
    pie()

    // 获取文章全部信息
    getArticleInfo()
});

// 查询文章信息
const getArticleInfo = () => {
    GetAllArticleInfo().then(res => {
        res.data.forEach(element => {
            // 将时间戳转为时间格式
            var date = function (time: any) {
                var date = new Date(+time + 8 * 3600 * 1000);
                return date.toJSON().substr(0, 19).replace('T', ' ').replace(/-/g,
                    '.');
            }
            var time1 = date(new Date(element.publishTime));
            element.publishTime = time1;
            // 添加  if判断 仅展示6条数据
            if (state.articleInfo.length < 6) {
                state.articleInfo.push(element)
            }
        })
    })
}

const calculateDays = () => {
    var day = Math.floor(new Date().getTime() / 1000) - (new Date('2022-07-20 00:00:00')
        .getTime() /
        1000),
        day2 = Math.floor(day / (24 * 3600));
    var value = day2 < 10 ? 0 + day2 : day2;
    // if (value > 0) {
    //     var num = 0;
    //     var t = setInterval(function () {
    //         num++;
    //         state.siteDays = num < 10 ? 0 + num : num;
    //         if (num == value) {
    //             clearInterval(t);
    //         }
    //     }, 30);
    // } else {
    //     state.siteDays = value;
    // }
    state.siteDays = value;

}


// 饼图 
const pie = () => {
    const myChart = echarts.init(MyEchart.value);
    var option = {
        title: {
            text: '本站文章分类',
            subtext: '文章数量',
            left: 'left',
            textStyle: {
                //文字颜色
                color: '#fff',
            },
            subtextStyle: {
                color: '#fff',
            },
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '0%',
            // bottom: 'bottom',
            textStyle: { //图例文字的样式
                color: '#fff',
                // fontSize: 12
            },
        },
        series: [{
            name: '类别的数量',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [{

            }]
        }]
    }

    // 查询所有文章分类
    GetArticleClass().then(res => {
        res.data.forEach(element => {
            option.series[0].data.push({
                value: element.articleNumber,
                name: element.classifyName,
                itemStyle: {
                    color: {
                        type: 'linear', // 线性渐变
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: element
                                .color1 // 0%处的颜色
                        }, {
                            offset: 1,
                            color: element
                                .color2 // 100%处的颜色
                        }]
                    }
                },
            })
        });

        // 指定图表的配置项和数据
        myChart.setOption(option);
    })


}

// 根据浏览器的大小来改变图表大小
window.onresize = () => {
    MyEchart.value.resize();
}


</script>

<style>
.backstage_home {
    width: 100%;
}

.four-block {
    background-color: #0402028f;
}

.top_bg {
    width: 100%;
    height: 200px;
    background-color: rgb(189 189 189 / 31%);
    /* background-image: url(../../../../assets/banner/banner01.png); */
    /* background-size: cover; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    margin: 0 auto;
    color: white;
    line-height: 60px;
    text-align: center;
    margin-bottom: 20px;
}

.top_bg h1 {
    font-size: 60px;
    text-shadow: 3px 3px 0px #515151;
    padding-top: 50px;
}

.top_bg p {
    font-weight: lighter;
    font-size: 18px;
}

@media screen and (max-width: 850px) {
    .top_bg h1 {
        font-size: 50px;
    }
}

@media screen and (max-width: 550px) {
    .top_bg h1 {
        font-size: 40px;
    }
}

@media screen and (max-width: 450px) {
    .top_bg {
        line-height: 50px;
    }

    .top_bg h1 {
        font-size: 30px;
    }

    .top_bg p {
        font-size: 10px;
    }
}



/* .abstract>h4{
        color: #416aff;
        margin-bottom: 20px;
    }

    .round {
        width: 12px;
        height: 12px;
        background-color: #fc625d;
        border-radius: 16px;
        box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
        margin-bottom: 10px;
    }*/

.data_row .el-col {
    height: 100px;
    margin-bottom: 20px;
    overflow: hidden;
}

.data_row .el-col>div {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    color: white;
}

.data_left {
    float: left;
    width: 40%;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.data_left .el-icon {
    font-size: 60px;
}

.data_right {
    width: 60%;
    float: right;
    margin-top: 10px;
}

.data_right h1 {
    font-size: 40px;
}

.data_right h1 span {
    font-size: 15px;
    margin-left: 10px;
}

.data_right p {
    font-size: 14px;
    font-weight: 600;
    margin-left: 3px;
}

.echarts {
    width: 100%;
    height: 300px;
    float: left;
    background-color: #0402028f;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 20px;
    margin-bottom: 20px;
}

.latest_article {
    width: 100%;
    height: 300px;
    float: left;
    background-color: #0402028f;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 20px;
    margin-bottom: 20px;
}

.el-divider--horizontal {
    margin: 20px 0;
}

.article_list {
    color: rgb(153 153 153);
    line-height: 30px;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    text-align: justify;
    overflow: hidden;
}

.article_list span {
    margin-right: 10px;
}

.article_list a {
    color: #ff958b;
}

.article_list a:hover {
    color: rgb(255, 107, 136);
}

.more {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    float: right;
    color: #bababa;
    font-size: 13px;
    cursor: pointer;
}
</style>